// 引入 echarts 文件，这里路径一定要正确，就是ec-canvas -> echart.js
import * as echarts from '../../ec-canvas/echarts';
Page({
  data: {
    ec: {
      lazyLoad: true
    },
    type: 'all'
  },
  onLoad(options) {
    this.lazyComponent = this.selectComponent('#mychart-dom-bar')
    setTimeout(() => {
      this.init()
    }, 1000);
  },
  init(){
    this.lazyComponent.init((canvas, width, height, dpr)=>{
      let chart = echarts.init(canvas, null, {
        width: width,
        height: height, // 图表高
        devicePixelRation: dpr
      });
      let option = getOption();
      chart.setOption(option);
      this.chart = chart//将图表实例绑定在this上，方便其他函数中访问
      return chart;
    })
  },
  changeType(e) {
    console.log(e.currentTarget.dataset.type)
    const type = e.currentTarget.dataset.type;
    let option;
    if (type === 'average') {
      option = getAverageOption(); // 获取平均值相关的数据配置
    } else {
      option = getOption(); // 获取原始数据配置
    }
    this.setData({
      type: type
    });
  // 在这里创建一个新的图表实例并设置新的数据配置
  this.lazyComponent.init((canvas, width, height, dpr)=>{
    let chart = echarts.init(canvas, null, {
      width: width,
      height: height, // 图表高
      devicePixelRation: dpr
    });
    chart.setOption(option);
    return chart;
  });
  }
})
function getOption(){
return {
  toolbox: {
    top: "10%",
    show: true,
    orient: "vertical",
    feature: {
      magicType: {
        type: ['line', 'bar', 'stack']
      },
      saveAsImage: {
        show: true,
        title: 'Save As Image',
        // type  = 'png'
      },
      dataZoom: {
        type: 'slider', // 改为滑动条型数据缩放
        start: 0,
        end: 100, // 初始显示全部数据
      },
      show: true,
      restore: {},

    }

  },
  tooltip: {
    triggerOn: 'click',
    trigger: 'axis',
    borderWidth: 0,
    borderRadius: 5,
    confine: true, // 设置tooltip不超出视图范围
    show: true,
    borderColor: " rgba(127, 216, 232, 0.8)",
    borderWidth: 5,
    padding: [
      0, // 上
      10, // 右
      0, // 下
      10, // 左
    ]
  },
  legend: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    itemGap: 7,
  },
  grid: {
    top: 100,
    left: '3%',
    right: '4%',
    bottom: '22%',
    containLabel: true,
  },
  dataZoom: [{
      type: 'inside',
      start: 0,
      end: 20
    },
    {
      start: 0,
      end: 20
    }
  ],
  xAxis: {
    type: 'category',
    data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号号', '28号', '29号', '30号', '31号'],
    axisPointer: {
      handle: {
        show: true
      },
      show: true
    }
  },
  yAxis: {
    name: "含沙量",
    type: 'value',
    boundaryGap: [0, '100%'],
    max: function (value) {
      return value.max - 20;
    }
  },
  series: [{
      name: '1月',
      data: [0.241, 0.241,  0.261, 0.271, 0.271, 0.281, 0.281, 0.281, 0.281, 0.281, 0.281, 0.271, 0.251, 0.211, 0.201, 0.181, 0.161, 0.161, 0.161, 0.161, 0.171, 0.191, 0.201, 0.211, 0.211, 0.211, 0.211, 0.211, 0.211],
      type: 'line'
    },
    {
      name: '2月',
      data: [0.201, 0.191, 0.171, 234, 290, 330, 310, 311, 312, 313, 315, 0, 120, 132, 101, 134, 90, 230, 210, 123, 456, 123],
      type: 'line'
    },
    {
      name: '3月',
      data: [1.371, 232, 201, 154, 190, 330, 410, 411, 412, 413, 414, 415],
      type: 'line'
    },
    {
      name: '4月',
      data: [1.88, 1244, 2432, 3433, 4444, 5555, 1111, 3222, 2343, 5443, 2341, 1234],
      type: 'line'
    },
    {
      name: '5月',
      data: [0.35, 932, 901, 934, 1290, 1330, 1320, 1321, 1322, 1323, 1324, 1234],
      type: 'line'
    },
    {
      name: '6月',
      data: [0.34, 934, 903, 936, 1295, 1335, 1350, 1351, 1352, 1253, 1354, 1234],
      type: 'line'
    },
    {
      name: '7月',
      data: [0.023, 2344, 2344, 1234, 5642, 134, 1234, 1234, 4322, 12345, 3333, 4123],
      type: 'line'
    },
    {
      name: '8月',
      data: [11.9, 999, 1000, 1111, 2222, 1222, 3333, 1233, 1234, 1523, 1876, 4000],
      type: 'line'
    },
    {
      name: '9月',
      data: [4.20, 3241, 1243, 2131, 2445, 1335, 2344, 1233, 3435, 1234, 2331, 4211],
      type: 'line'
    },
    {
      name: '10月',
      data: [1.31, 1234, 2321, 1244, 2311, 887, 576, 678, 345, 908, 400, 3123],
      type: 'line'
    },
    {
      name: '11月',
      data: [1.06, 3241, 1243, 2131, 2445, 1335, 2344, 1233, 3435, 1234, 2331, 4211],
      type: 'line'
    },
    {
      name: '12月',
      data: [0.79, 1234, 2321, 1244, 2311, 887, 576, 678, 345, 908, 400, 3123],
      type: 'line'
    },
  ]
};
}
function getAverageOption(){
  return {
    toolbox: {
      top: "10%",
      show: true,
      orient: "vertical",
      feature: {
        magicType: {
          type: ['line', 'bar', 'stack']
        },
        saveAsImage: {
          show: true,
          title: 'Save As Image',
        },
        dataZoom: {
          type: 'slider', // 改为滑动条型数据缩放
          start: 0,
          end: 100, // 初始显示全部数据
        },
        restore: {},
  
      }
  
    },
    tooltip: {
      triggerOn: 'click',
      trigger: 'axis',
      borderWidth: 0,
      borderRadius: 5,
      confine: true, // 设置tooltip不超出视图范围
      show: true,
      borderColor: " rgba(127, 216, 232, 0.8)",
      borderWidth: 5,
      padding: [
        0, // 上
        10, // 右
        0, // 下
        10, // 左
      ]
    },
    grid: {
      top: 100,
      left: '3%',
      right: '4%',
      bottom: '22%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        handle: {
          show: true
        },
        show: true
      }
    },
    yAxis: {
      name: "含沙量平均值",
      type: 'value',
      boundaryGap: [0, '100%'],
      max: function (value) {
        return value.max - 20;
      }
    },
    series: [{
        data: [0,123,13,213,123,234,123,123,345,456,123,234],
        type: 'line'
      }
    ]
  };
};